<template>
	<div class="app-container">
		<div>
      <p class="dialogTitle title">当前地震事件:
        <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
        <span v-else>请在地震事件管理中设置当前地震事件</span>
      </p>
    </div>
    <el-row>
			<el-col :span="8">
				<div style="font-size: 16px;font-weight: bold;">
					地震救灾投入费用评估
				</div>
			</el-col>
		</el-row>	
		<el-row style="margin-top: 20px;margin-bottom: 10px;">
			
			<el-col :span="10">
				<el-button type="primary" @click="handleQuery">评估</el-button>
			</el-col>
			<el-col :span="6">
				<el-link type="primary" :underline="false" @click="viewFormula">修改评估算法</el-link>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="18">
				<el-table v-loading="loading" :data="dataList"  :span-method="objectSpanMethod">
					<el-table-column label="灾区" align="center" prop="disasterAreaName" />
					<el-table-column label="地震救灾投入费用(万元)" align="center" prop="costs" />
				</el-table>
			</el-col>
		</el-row>
		
		<el-dialog title="评估算法" v-model="open" width="700px" append-to-body>
			<div style="font-size: 16px;">
				<p>地震救灾投入费用按下列方法估计：</p>
				<ul style="list-style: none;padding-left: 20px;">
					<li>
						<p>a) 6级以下(不含6级)地震：可取地震直接经济损失的％
							<el-input v-model="percentData.lossRatio1" type="number" oninput="if(value>100)value=100;if(value<0)value=0;" style="max-width: 120px" class="input-with-select">
								<template #append>
									<span>%</span>
								</template>
							</el-input>；
						</p>	
					</li>
					<li>
						<p>b) 6～7级(不含7级)地震：可取地震直接经济损失的％
							<el-input v-model="percentData.lossRatio2" type="number" oninput="if(value>100)value=100;if(value<0)value=0;" style="max-width: 120px" class="input-with-select">
								<template #append>
									<span>%</span>
								</template>
							</el-input>；
						</p>
					</li>
					<li>
						<p>c) 7级以上(含7级)地震：可取地震直接经济损失的％
							<el-input v-model="percentData.lossRatio3" type="number" oninput="if(value>100)value=100;if(value<0)value=0;" style="max-width: 120px" class="input-with-select">
								<template #append>
									<span>%</span>
								</template>
							</el-input>。
						</p>
					</li>
				</ul>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="updatePercent">保存</el-button>
					<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="earthquakeRelief">
	import useEventStore from "@/store/modules/event";
	import { getAllList, getEarthquakeReliefCostAssessment, getEvaluation, saveEvaluation } from "@/api/directLossAssess/earthquakeRelief.js"
	const { proxy } = getCurrentInstance();
	const dataList = ref([]);
	const loading = ref(false);
	const open = ref(false);
	const currentEvent = computed(() => useEventStore().currentEvent);
	const percentData = ref({
		lossRatio1: 1.5,
		lossRatio2: 3.5,
		lossRatio3: 6.0
	})

	// 评估
	function handleQuery() {
		loading.value = true;
		let { lossRatio1, lossRatio2, lossRatio3 } = percentData.value
		getAllList({xsemId:currentEvent.value.id, lossRatio1, lossRatio2, lossRatio3}).then(response => {
			dataList.value = response.data ? response.data : [];
			proxy.$modal.msgSuccess(response.message);
			loading.value = false;
		}).catch(err=>{loading.value = false});
	}

	// 查看计算公式
	function viewFormula(id) {
		open.value = true;
	}
	
	function getDataList(){
		getEarthquakeReliefCostAssessment(currentEvent.value.id).then(response => {
			dataList.value = response.data ? response.data : [];
		});
	}

	function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	 if (columnIndex === 0) {
		 const _row = setTable(dataList.value).one[rowIndex];
		 const _col = _row > 0 ? 1 : 0;
		 return {
			 rowspan: _row,
			 colspan: _col
		 };
	 }
//	 if (columnIndex === 1 ) {
//		 const _row = setTable(getData.value).two[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
//	 if (columnIndex === 3 ) {
//		 const _row = setTable(getData.value).three[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
//	 if (columnIndex === 4 ) {
//		 const _row = setTable(getData.value).four[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
}
	function setTable(tableData) {
		 let spanOneArr = [],
		 spanTwoArr = [],
		 spanThreeArr = [],
		 spanFourArr = [],
		 concatOne = 0,
		 concatTwo = 0,
		 concatThree = 0,
		 concatFour = 0;
		 tableData.forEach((item, index) => {
			 if (index === 0) {
				 spanOneArr.push(1);
				 spanTwoArr.push(1);
				 spanThreeArr.push(1);
				 spanFourArr.push(1);
			 } else {
				 if (item.evaluationSubareaName === tableData[index - 1].evaluationSubareaName) {
				 //第一列需合并相同内容的判断条件
					 spanOneArr[concatOne] += 1;
					 spanOneArr.push(0);
				 } else {
					 spanOneArr.push(1);
					 concatOne = index;
				 }
				 
	//			 if (item.longitude === tableData[index - 1].longitude) {
	//			 //第二列和需合并相同内容的判断条件
	//				 spanTwoArr[concatTwo] += 1;
	//				 spanTwoArr.push(0);
	//			 } else {
	//				 spanTwoArr.push(1);
	//				 concatTwo = index;
	//			 }
	//			 
	//			 if (item.latitude === tableData[index - 1].latitude) {
	//			 //第三列和需合并相同内容的判断条件
	//				 spanThreeArr[concatThree] += 1;
	//				 spanThreeArr.push(0);
	//			 } else {
	//				 spanThreeArr.push(1);
	//				 concatThree = index;
	//			 }
	//			 
	//			 if (item.macroPosition === tableData[index - 1].macroPosition) {
	//			 //第三列和需合并相同内容的判断条件
	//				 spanFourArr[concatFour] += 1;
	//				 spanFourArr.push(0);
	//			 } else {
	//				 spanFourArr.push(1);
	//				 concatFour = index;
	//			 }
			 }
		 });
	 	return {
			 one: spanOneArr,
			 two: spanTwoArr,
			 three: spanThreeArr,
			 four: spanFourArr,
	 	};
	}

	// 获取评估算法
	const getPercent = () => {
		getEvaluation(currentEvent.value.id).then(res => {
			percentData.value = res.data ? res.data : percentData.value
		})
	}
	// 修改评估算法
	const updatePercent = () => {
		if(percentData.value.lossRatio1==''){
			proxy.$modal.msgWarning('请输入6级以下(不含6级)地震，可取地震直接经济损失%')
			return
		}
		if(percentData.value.lossRatio2==''){
			proxy.$modal.msgWarning('请输入6～7级以下(不含7级)地震，可取地震直接经济损失%')
			return
		}
		if(percentData.value.lossRatio3==''){
			proxy.$modal.msgWarning('请输入7级以上(不含7级)地震，可取地震直接经济损失%')
			return
		}
		let data = {
			...percentData.value,
			xsemId: currentEvent.value.id
		}
		saveEvaluation(data).then(res => {
			console.log(res)
			open.value = false
			getPercent()
		})
	}
	
	watch(() => currentEvent.value, () => {
		if(currentEvent.value?.id){
			getDataList();
			getPercent()
		}
	}, {deep: true, immediate: true})
</script>

<style scoped lang="scss">
	.title {
		margin: 0 0 20px !important;
	}
</style>